<template>
  <div class="home">
    <!-- 顶部 -->
    <chart-top :chartData="chartData"></chart-top>
    <!-- 中间 -->
    <chart-main :x="chartData.orderFullYearAxis" :saleArr="chartData.orderFullYear" :visiteArr="chartData.userFullYear"
      :arr="chartData.orderRank" :arr1="chartData.userRank"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="chartData.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
//引入请求函数
import { reqChartsData } from "@/api/home/home";
//引入相应的子组件
import ChartTop from "./ChartTop/index.vue";
import ChartMain from "./ChartMain/index.vue";
import ChartFooter from "./ChartFooter/index.vue";
//引入钩子
import { onMounted, ref } from "vue";

let chartData = ref({})
//测试mock数据能否获取到
onMounted(async () => {
  let result = await reqChartsData();
  chartData.value = result

});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  /**渐变**/
  background: #ccc;
  padding: 20px;
}
</style>